<template>
	<div>
		<div class="content-box">
		    <div class="verify-box">
		        <slide-verify ref="slideRef" :l="42" :r="10"
		          :w="280" :h="200" :imgs="images" slider-text="向右滑动"
		          @success="onSuccess" @fail="onFail" @refresh="onRefresh"
		          @fulfilled="onRefreshComplete" @again="onAgain">
		        </slide-verify>
		    </div>
		    <div class="tips" :class="isSuccess ? '' : 'red'">{{tipsMsg}}</div>
		</div>
	</div>
</template>

<script>
	
	export default {
	  name: 'SlideVerifyCompontents',
	  data() {
	    return {
	      images: [
	        require('../assets/img/bg.jpg'),
	      ],
	      tipsMsg:'',
	      isSuccess: true
	    }
	  },
	  methods: {
	    // 成功回调
	    onSuccess(){
	        this.tipsMsg = '恭喜您，验证成功啦！';
	        this.isSuccess = true;
	    },
	    // 失败回调
	    onFail(){
	        this.tipsMsg = '验证失败，请重试哦！';
	        this.isSuccess = false;
	    },
	    // 点击刷新回调
	    onRefresh(){
	        this.tipsMsg = ''
	    },
	    // 刷新成功后回调
	    onRefreshComplete(){
	      // TODO
	      this.tipsMsg = ''
	      this.isSuccess = true;
	    },
	    // 检测到非人为操作
	    onAgain() {
	      this.tipsMsg = "再试一次吧～"
	      this.$refs.slideRef.reset();
	    }
	  }
	}
</script>

<style>
</style>